<template>
  <div>
    <el-form ref="form" :model="form" size="small" label-width="135px">
      <el-form-item label="设备">
        <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" @click="addPort5">添加</el-button>
      </el-form-item>
      <el-form-item label="" prop="BlkioWeightDevice" v-for="(item, index) in portNum5" :key="item + index + 100000">
        <el-input placeholder="请输入PathOnHost" v-model="form.Devices[index].PathOnHost" style="width: 29%;">
          <template slot="prepend">主机路径</template>
        </el-input>
        <el-input placeholder="请输入PathInContainer" v-model="form.Devices[index].PathInContainer" style="width: 29%;margin-left: 10px;">
          <template slot="prepend">容器路径</template>
        </el-input>
        <el-input placeholder="请输入CgroupPermissions" v-model="form.Devices[index].CgroupPermissions" style="width: 29%;margin-left: 10px;">
          <template slot="prepend">权限组</template>
        </el-input>
        <el-button @click="delPort5(item, index)" title="删除" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
      </el-form-item>

      <el-form-item label="设备权重">
        <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" @click="addPort">添加</el-button>
      </el-form-item>
      <el-form-item label="" prop="BlkioWeightDevice" v-for="(item, index) in portNum" :key="item">
        <el-input placeholder="请输入Path" v-model="form.BlkioWeightDevice[index].Path" style="width: 29%;">
          <template slot="prepend">Path</template>
        </el-input>
        <el-input placeholder="请输入Weight，>=0" type="number" min="0" v-model.number="form.BlkioWeightDevice[index].Weight" style="width: 29%;margin-left: 10px;">
          <template slot="prepend">Weight</template>
        </el-input>
        <el-button @click="delPort(item, index)" title="删除" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
      </el-form-item>

      <el-form-item label="限制设备读取速率">
        <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" @click="addPort1">添加</el-button>
        <span class="tishi">单位：字节/秒</span>
      </el-form-item>
      <el-form-item label="" prop="BlkioDeviceReadBps" v-for="(item, index) in portNum1" :key="item + index + 1">
        <el-input placeholder="请输入Path" v-model="form.BlkioDeviceReadBps[index].Path" style="width: 29%;">
          <template slot="prepend">Path</template>
        </el-input>
        <el-input placeholder="请输入Rate" type="number" min="0" v-model.number="form.BlkioDeviceReadBps[index].Rate" style="width: 29%;margin-left: 10px;">
          <template slot="prepend">Rate</template>
        </el-input>
        <el-button @click="delPort1(item, index)" title="删除" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
      </el-form-item>

      <el-form-item label="限制设备写入速率">
        <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" @click="addPort2">添加</el-button>
        <span class="tishi">单位：字节/秒</span>
      </el-form-item>
      <el-form-item label="" prop="BlkioDeviceWriteBps" v-for="(item, index) in portNum2" :key="item + index + 100">
        <el-input placeholder="请输入Path" v-model="form.BlkioDeviceWriteBps[index].Path" style="width: 29%;">
          <template slot="prepend">Path</template>
        </el-input>
        <el-input placeholder="请输入Rate" type="number" min="0" v-model.number="form.BlkioDeviceWriteBps[index].Rate" style="width: 29%;margin-left: 10px;">
          <template slot="prepend">Rate</template>
        </el-input>
        <el-button @click="delPort2(item, index)" title="删除" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
      </el-form-item>

      <el-form-item label="限制设备读取速率">
        <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" @click="addPort3">添加</el-button>
        <span class="tishi">单位：IO/秒</span>
      </el-form-item>
      <el-form-item label="" prop="BlkioDeviceWriteBps" v-for="(item, index) in portNum3" :key="item + index + 1000">
        <el-input placeholder="请输入Path" v-model="form.BlkioDeviceReadIOps[index].Path" style="width: 29%;">
          <template slot="prepend">Path</template>
        </el-input>
        <el-input placeholder="请输入Rate" type="number" min="0" v-model.number="form.BlkioDeviceReadIOps[index].Rate" style="width: 29%;margin-left: 10px;">
          <template slot="prepend">Rate</template>
        </el-input>
        <el-button @click="delPort3(item, index)" title="删除" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
      </el-form-item>

      <el-form-item label="限制设备写入速率">
        <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" @click="addPort4">添加</el-button>
        <span class="tishi">单位：IO/秒</span>
      </el-form-item>
      <el-form-item label="" prop="BlkioDeviceWriteBps" v-for="(item, index) in portNum4" :key="item + index + 10000">
        <el-input placeholder="请输入Path" v-model="form.BlkioDeviceWriteIOps[index].Path" style="width: 29%;">
          <template slot="prepend">Path</template>
        </el-input>
        <el-input placeholder="请输入Rate" type="number" min="0" v-model.number="form.BlkioDeviceWriteIOps[index].Rate" style="width: 29%;margin-left: 10px;">
          <template slot="prepend">Rate</template>
        </el-input>
        <el-button @click="delPort4(item, index)" title="删除" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        Devices: [],
        BlkioWeightDevice: [],
        BlkioDeviceReadBps: [],
        BlkioDeviceWriteBps: [],
        BlkioDeviceReadIOps: [],
        BlkioDeviceWriteIOps: []
      },
      portNum: [],
      i: 0,
      portNum1: [],
      i1: 0,
      portNum2: [],
      i2: 0,
      portNum3: [],
      i3: 0,
      portNum4: [],
      i4: 0,
      portNum5: [],
      i5: 0
    }
  },
  props: ['item'],
  watch: {
    // 数据回填
    item: function () {
      if (this.item) {
        this.form.Devices = this.item.HostConfig.Devices ? this.item.HostConfig.Devices : []
        this.form.BlkioWeightDevice = this.item.HostConfig.BlkioWeightDevice ? this.item.HostConfig.BlkioWeightDevice : []
        this.form.BlkioDeviceReadBps = this.item.HostConfig.BlkioDeviceReadBps ? this.item.HostConfig.BlkioDeviceReadBps : []
        this.form.BlkioDeviceWriteBps = this.item.HostConfig.BlkioDeviceWriteBps ? this.item.HostConfig.BlkioDeviceWriteBps : []
        this.form.BlkioDeviceReadIOps = this.item.HostConfig.BlkioDeviceReadIOps ? this.item.HostConfig.BlkioDeviceReadIOps : []
        this.form.BlkioDeviceWriteIOps = this.item.HostConfig.BlkioDeviceWriteIOps ? this.item.HostConfig.BlkioDeviceWriteIOps : []
      }
    },
    // 监听vuex中是isupload是否变化为true，true则上传本组件的数据。
    '$store.state.isUpload': function () {
      if (this.$store.state.isUpload) {
        this.$emit('data', ['Device', this.form])
      }
    }
  },
  methods: {
    // 添加开放端口的input框
    addPort () {
      this.portNum.push(this.i)
      this.form.BlkioWeightDevice.push({ Path: '', Weight: null })
      this.i++
    },
    // 删除开放端口的input框
    delPort (item, index) {
      this.portNum = this.portNum.filter(data => {
        return data !== item
      })
      this.form.BlkioWeightDevice.splice(index, 1)
    },

    // 添加开放端口的input框
    addPort1 () {
      this.portNum1.push(this.i1)
      this.form.BlkioDeviceReadBps.push({ Path: '', Rate: null })
      this.i1++
    },
    // 删除开放端口的input框
    delPort1 (item, index) {
      this.portNum1 = this.portNum1.filter(data => {
        return data !== item
      })
      this.form.BlkioDeviceReadBps.splice(index, 1)
    },

    addPort2 () {
      this.portNum2.push(this.i2)
      this.form.BlkioDeviceWriteBps.push({ Path: '', Rate: null })
      this.i2++
    },
    // 删除开放端口的input框
    delPort2 (item, index) {
      this.portNum2 = this.portNum2.filter(data => {
        return data !== item
      })
      this.form.BlkioDeviceWriteBps.splice(index, 1)
    },

    addPort3 () {
      this.portNum3.push(this.i3)
      this.form.BlkioDeviceReadIOps.push({ Path: '', Rate: null })
      this.i3++
    },
    // 删除开放端口的input框
    delPort3 (item, index) {
      this.portNum3 = this.portNum3.filter(data => {
        return data !== item
      })
      this.form.BlkioDeviceReadIOps.splice(index, 1)
    },

    addPort4 () {
      this.portNum4.push(this.i4)
      this.form.BlkioDeviceWriteIOps.push({ Path: '', Rate: null })
      this.i4++
    },
    // 删除开放端口的input框
    delPort4 (item, index) {
      this.portNum4 = this.portNum4.filter(data => {
        return data !== item
      })
      this.form.BlkioDeviceWriteIOps.splice(index, 1)
    },

    addPort5 () {
      this.portNum5.push(this.i5)
      this.form.Devices.push({ PathOnHost: '', PathInContainer: '', CgroupPermissions: '' })
      this.i5++
    },
    // 删除开放端口的input框
    delPort5 (item, index) {
      this.portNum5 = this.portNum5.filter(data => {
        return data !== item
      })
      this.form.Devices.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.tishi{
  font-size: 12px;
  color: #ccc;
  padding-left: 10px;
}
.submit{
  background: #067FB5;
  color: #fff;
  margin-left: 30px;
}
</style>
